<template>
  <div>
    <div class="header">
        <div class="headerTop">
            <ul class="header_ul">
                <li><a href="">小米商城</a></li>
                <li><a href="">MIUI</a></li>
                <li><a href="">IoT</a></li>
                <li><a href="">云服务</a></li>
                <li><a href="">金融</a></li>
                <li><a href="">有品</a></li>
                <li><a href="">小爱开放平台</a></li>
            </ul>
            <div class="login_text">
                <div><a href="" class="headerlogin">登录</a></div>
                <div class="shopcar"><img src="../public/imgs/icon-cart-checked.png" alt="">购物车</div>
            </div>
        </div>
        <div class="Nav">
            <div><img class="MiLogo" src="../public/imgs/mi-logo.png" alt=""></div>
            <ul class="NavUl">
                <li class="dianshi">
                    <a href="" class="NavUlhover">电视</a>
                    <div class="NavGoods">
                        <div class="TVMode">
                            <div class="TVModeImg">
                                <img src="../public/imgs/nav-img/nav-3-1.jpg" alt="">
                            </div>
                            <div class="introText"><span>小米壁画电视 65英寸</span></div>
                            <div class="price"><span>6999</span></div>
                        </div>
                        <div class="TVMode">
                            <div class="TVModeImg">
                                <img src="../public/imgs/nav-img/nav-3-1.jpg" alt="">
                            </div>
                            <div class="introText"><span>小米壁画电视 65英寸</span></div>
                            <div class="price"><span>6999</span></div>
                        </div>
                        <div class="TVMode">
                            <div class="TVModeImg">
                                <img src="../public/imgs/nav-img/nav-3-1.jpg" alt="">
                            </div>
                            <div class="introText"><span>小米壁画电视 65英寸</span></div>
                            <div class="price"><span>6999</span></div>
                        </div>
                        <div class="TVMode">
                            <div class="TVModeImg">
                                <img src="../public/imgs/nav-img/nav-3-1.jpg" alt="">
                            </div>
                            <div class="introText"><span>小米壁画电视 65英寸</span></div>
                            <div class="price"><span>6999</span></div>
                        </div>
                        <div class="TVMode">
                            <div class="TVModeImg">
                                <img src="../public/imgs/nav-img/nav-3-1.jpg" alt="">
                            </div>
                            <div class="introText"><span>小米壁画电视 65英寸</span></div>
                            <div class="price"><span>6999</span></div>
                        </div>
                        <div class="TVMode">
                            <div class="TVModeImg">
                                <img src="../public/imgs/nav-img/nav-3-1.jpg" alt="">
                            </div>
                            <div class="introText"><span>小米壁画电视 65英寸</span></div>
                            <div class="price"><span>6999</span></div>
                        </div>
                        <div class="TVMode">
                            <div class="TVModeImg">
                                <img src="../public/imgs/nav-img/nav-3-1.jpg" alt="">
                            </div>
                            <div class="introText"><span>小米壁画电视 65英寸</span></div>
                            <div class="price"><span>6999</span></div>
                        </div>
                        
                    </div>
                </li>
                <li class="shouji">
                    <a href="" class="NavUlhover">小米手机</a>
                    <div class="NavGoodsPhone">
                        <div class="TVMode"
                        v-for="item in phoneData.list"
                        :key="item.id"
                        >
                            <div class="TVModeImg">
                                <img :src="item.mainImage" alt="">
                            </div>
                            <div class="introText"><span>{{ item.subtitle }}</span></div>
                            <div class="price"><span>{{ item.price }}</span></div>
                        </div>
                    </div>
                </li>
                <li><a href="" class="NavUlhover">RedMi红米</a></li>
                <li><a href="" class="NavUlhover">笔记本</a></li>
                <li><a href="" class="NavUlhover">路由器</a></li>
                <li><a href="" class="NavUlhover">家电</a></li>
            </ul>
            <div class="searchinput">
                <div class="input"></div>
                <div class="searchimg"><img src="../public/imgs/icon-search.png" alt=""></div>
            </div>
        </div>
    </div>
  </div>
</template>

<script>
import {data,status,pageNum,pageSize,size} from "@/public/json/nav.json"
export default {
    name:"NavHeader",
    data(){
        return{
            phoneData:{}
        }
    },
    mounted(){
        this.phoneData = data 
    }
}
</script>

<style scoped>
    .header{
        height: 30px;
        line-height: 30px;
        width: 100%;
    }
    .headerTop{
        display: flex;
        justify-content: space-between;
        background: black;
    }
    .header_ul{
        display: flex;
    }
    .headerTop li{
        margin-right: 20px;
    }
    .headerTop li a{
        color: #808080;
    }
    .login_text{
        display: flex;
    }
    .headerlogin{
        color: #808080;
    }
    .shopcar{
        background: #ff6501;
        color: white;
        margin-left: 10px;
        padding: 0 10px;
        box-sizing: border-box;
    }
    .shopcar img{
        vertical-align: middle;
        margin-right: 10px;
        width: 18px;
        height: 18px;
    }
    .Nav{
        box-sizing: border-box;
        display: flex;
        justify-content: space-between;
        padding: 30px 5px 0;
        position: relative;
    }
    .MiLogo{
        background: #ff6501;
    }
    .NavUl{
        display: flex;
    }
    .NavUl li{
        margin-left: 20px;
    }
    
    .NavUl li a{
        font-size: 18px;
        font-weight: bold;
        color: black;

    }
    .NavUl li a:hover{
        color: #ff6501;
        text-decoration: none;
        
    }

    .NavGoodsPhone{
        position: absolute;
        width: 100%;
        display: flex;
        justify-content: space-between;
        left: 0;
        top: 81px;
        display: none;
        background: white;
        z-index: 100;
    }
    .NavGoods{
        position: absolute;
        width: 100%;
        display: flex;
        justify-content: space-between;
        left: 0;
        top: 81px;
        display: none;
        background: white;
        z-index: 100;
    }
    .NavUl .dianshi:hover .NavGoods,
    .NavUl .shouji:hover .NavGoodsPhone
    {
        display: inline-block;
    }
    .TVMode img{
        width: 200px;
    }
    .TVModeImg{
        border-right: 1px solid #999;
    }
    .introText{
        text-align: center;
    }
    .price{
        font-weight: bold;
        color: #ff6501;
        text-align: center;
    }
    .searchinput{
        /* width: 200px; */
        display: flex;
        border: 1px solid  #999;
        height: 30px;
    }
    .input {
        width: 180px;
        border-right: 1px solid  #999;
    }
    .searchimg{
        width: 30px;
        text-align: center;
        position: relative;
        top: 2px;
        
    }
    .searchinput img{
        width: 15px;
    }
</style>